<script setup>
	import Dialog from '../Layout/components/Dialog.vue'
	import {
		h,
		ref,
		reactive
	} from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'

	const activeTab = ref(0);
	const form = reactive({})
	const form2 = reactive({
		serve_arr:[]
	})
	const form3 = reactive({})
	const form4 = reactive({})
	const agree = ref(false)
	const dialogVisible = ref(false)
	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"
	const dmName = ref(false)

	const options = ref([{
		label: '模版一',
		value: 1
	}, {
		label: '模版一',
		value: 2
	}, {
		label: '未设置模版',
		value: 0
	}])


	const domainform = reactive({})

	const tableData = ref([{
		name: '190解析DNS',
		name_arr: ['dns1.190.vip', 'dns2.190.vip'],
		time: '2024-11-11 17:06:21',
		remark: '190解析DNS服务器'
	}, {
		name: '出售页DNS',
		name_arr: ['dns1.190.vip', 'dns2.190.vip'],
		time: '2024-11-11 17:06:21',
		remark: '出售页DNS服务器'
	}, {
		name: '我自己租的DNS',
		name_arr: ['dns1.test.com', 'dns2.test.com'],
		time: '2024-11-11 17:06:21',
		remark: '备注内容'
	}, {
		name: 'Cloudflare',
		name_arr: ['dns1.test.com', 'dns2.test.com'],
		time: '2024-11-11 17:06:21',
		remark: '备注内容'
	}, {
		name: 'AWS Route',
		name_arr: ['dns1.test.com', 'dns2.test.com'],
		time: '2024-11-11 17:06:21',
		remark: '备注内容'
	}])


	const tableData2 = ref([{
		name: 'dz80.com',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 0
	}, {
		name: 'zbb0.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 1
	}, {
		name: 'zealand.com.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 2
	}, {
		name: 'dz80.com',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 0
	}, {
		name: 'zbb0.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 1
	}, {
		name: 'zealand.com.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 2
	}, {
		name: 'dz80.com',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 0
	}, {
		name: 'zbb0.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 1
	}, {
		name: 'zealand.com.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 2
	}, {
		name: 'zealand.com.cn',
		record: 'www',
		record_type: 'A',
		line_type: '默认',
		record_val: '1.1.1.1',
		tll: 600,
		status: 2
	}])

	const tableData3 = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])

	const dialogShow = ref(false)
	const multipleSelection = ref([])
	const multipleSelection3 = ref([])
	const currentPage = ref(1)
	const total = ref(1000)
	const total3 = ref(100)
	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}
	const domainBack = () => {
		dialogVisible.value = false
	}
	
	
	const addDomain = () =>{
		dialogVisible.value = true
	}

	const domainSelect = () => {
		let arr = multipleSelection3.value.map(item => item.name)
		if(activeTab.value == 0){
			form.nameStr = arr.join('\n')
		}else{
			form3.nameStr = arr.join('\n')
		}
		dialogVisible.value = false
	}

	const openAgree = () => {
		dialogShow.value = true
	}

	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const handleSelectionChange3 = (val) => {
		multipleSelection3.value = val
	}

	const switchTab = (tabId) => {
		activeTab.value = tabId;
	};

	const onSubmit = () => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			icon: 'WarningFilled',
			message: h('div', null, [
				h('h4', null, 'DNS修改失败'),
				h('p', {
					style: 'color: #999999'
				}, '失败原因'),
			]),
			showCancelButton: false,
			showConfirmButton: false,
			type: 'error'
		})
	}

	const onSubmit2 = () => {
		ElMessageBox({
			title: '',
			customClass: 'custom-message',
			message: h('div', null, [
				h('h4', null, 'DNS修改失败'),
				h('p', {
					style: 'color: #999999'
				}, '可以将您的域名修改为当前DNS'),
			]),
			showCancelButton: false,
			showConfirmButton: false,
			type: 'success'
		})
	}
	
	const addServe = () =>{
		form2.serve_arr.push('')
	}
	
	const delServe = (index) =>{
		form2.serve_arr.splice(index,1)
	}
</script>
<template>
	<div class="container">
		<div class="page-title bold">DNS和解析</div>
		<div class="bs-panel">
			<el-row class="account-menu-list">
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(0)">
						<img src="../../assets/images/dns.png" alt="">
						<span>修改DNS</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(1)">
						<img src="../../assets/images/d-order.png" alt="">
						<span>我的DNS</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(2)">
						<img src="../../assets/images/enter-box.png" alt="">
						<span>添加解析记录</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="account-menu" @click="switchTab(3)">
						<img src="../../assets/images/dian.png" alt="">
						<span>解析记录管理</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div v-if="activeTab == 0">
			<div class="bs-panel">
				<div class="bs-panel-body">
					<div class="bs-panel_hd" style="margin-bottom: 0;">
						<div class="bs-panel_tt bold">修改DNS</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<div class="top-notice">
						<el-alert title="温馨提示：若您的域名已添加解析记录，请勿随意修改解析DNS，否则将导致原解析记录不生效，请谨慎操作！" type="warning"
							show-icon></el-alert>
					</div>
					<el-form :model="form" label-width="116px" label-position="right" size="large">
						<div class="el-form-item">
							<div class="el-form-item__label form-column">
								<div style="margin-left: auto;">域名</div>
								<div class="domain-select">从<el-button link
										@click="addDomain">我的域名</el-button>选择</div>
							</div>
							<div class="el-form-item__content">
								<div class="wrapdmTextarea textarea-box">
									<div class="textarea-warp" style="z-index: 200; top: 0;">
										<textarea id="textarea" placeholder="多条域名请换行分隔，每次最多批量处理100条域名"
											class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
											v-model="form.nameStr"></textarea>
										<div class="textarea-limit">
											{{getStringLen(form.nameStr)}}/100
										</div>
									</div>
								</div>
								<div class="textarea-tip">
									修改DNS，是指将当前域名的解析 DNS 服务器更换为其他 DNS 服务器，以便由新的 DNS 服务器负责该域名的解析。
								</div>
							</div>
						</div>
						<el-form-item label="DNS选择">
							<el-select v-model="form.dns" placeholder="请选择" style="width: 240px;margin-right: 20px;"
								clearable>
								<el-option label="出售页DNS" :value="0"></el-option>
								<el-option label="190解析DNS" :value="1"></el-option>
								<el-option label="已添加的DNS" :value="2"></el-option>
							</el-select>
							<el-button link class="btn-text" @click="switchTab(1)">管理我的DNS</el-button>
						</el-form-item>
						<div class="form-foot">
							<div class="form-agree">
								<el-checkbox v-model="agree" label="我已同意并阅读" />
								<el-button link class="agree-btn" @click="openAgree">《域名管理系统DNS服务协议》</el-button>
							</div>
							<div class="form-submit">
								<el-button type="warning" @click="onSubmit">确 定</el-button>
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<Dialog :dialogShow="dialogShow" title="域名管理系统DNS服务协议" content="" />
		</div>
		<div v-if="activeTab == 1">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="bs-panel_hd">
						<div class="bs-panel_tt bold">我的DNS</div>
						<div class="bs-back">
							<el-button link @click="switchTab(0)">返回修改域名DNS</el-button>
						</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<el-form :model="form2" label-width="116px" label-position="right" size="large">
						<el-form-item label="DNS名称">
							<el-input v-model="form2.name" placeholder="请输入名称" maxlength="10"
								style="width: 240px;margin-right: 20px;"></el-input>
							<span class="text-gray">10个汉字以内</span>
						</el-form-item>
						<el-form-item label="DNS服务器">
							<div class="dns-flex">
								<div class="dns-item">
									<el-input v-model="form2.serve" placeholder="请输入DNS服务器地址"
										style="width: 240px;margin-right: 20px;"></el-input>
									<span class="text-gray">目前仅支持域名格式地址</span>
								</div>
								<div class="dns-item">
									<el-input v-model="form2.serve2" placeholder="请输入DNS服务器地址"
										style="width: 240px;margin-right: 20px;"></el-input>
									<el-button class="add-dns" link @click="addServe">
										<el-icon size="24">
											<CirclePlus />
										</el-icon>
									</el-button>
								</div>
								<div class="dns-item" v-for="(item,index) in form2.serve_arr" :key="index">
									<el-input v-model="item[index]" placeholder="请输入DNS服务器地址"
										style="width: 240px;margin-right: 20px;"></el-input>
									<el-button class="add-dns" link @click="delServe(index)">
										<el-icon size="24">
											<el-icon>
												<Delete />
											</el-icon>
										</el-icon>
									</el-button>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="备注">
							<el-input v-model="form2.remark" placeholder="请输入备注" maxlength="20"
								style="width: 240px;margin-right: 20px;"></el-input>
							<span class="text-gray">20个汉字以内</span>
						</el-form-item>
						<el-form-item>
							<div class="form-submit">
								<el-button type="warning" @click="onSubmit2">添 加</el-button>
							</div>
						</el-form-item>
					</el-form>
					<el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
						<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
						<el-table-column prop="name" label="DNS名称">
						</el-table-column>
						<el-table-column prop="name_arr" label="DNS服务器">
							<template #default="scope">
								<p v-for="(item,index) in scope.row.name_arr" :key="index">
									{{item}}
								</p>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注">
						</el-table-column>
						<el-table-column prop="time" label="添加时间" align="center">
						</el-table-column>
						<el-table-column align="center" label="操作" width="140">
							<template #default="scope">
								<div class="operate-btns">
									<el-button link v-if="scope.$index > 1"
										@click="handelCancel(scope.row)">删除</el-button>
									<span v-else>-</span>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 2">
			<div class="bs-panel">
				<div class="bs-panel-body">
					<div class="bs-panel_hd" style="margin-bottom: 0;">
						<div class="bs-panel_tt bold">添加解析记录</div>
					</div>
				</div>
				<div class="bs-panel-body" style="padding-top: 0;">
					<el-form :model="form3" label-width="116px" label-position="left" size="large">
						<div class="el-form-item">
							<div class="el-form-item__label form-column">
								<div style="margin-left: auto;">域名</div>
								<div class="domain-select">从<el-button link @click="addDomain">我的域名</el-button>选择</div>
							</div>
							<div class="el-form-item__content">
								<div class="wrapdmTextarea textarea-box">
									<div class="textarea-warp" style="z-index: 200; top: 0;">
										<textarea id="textarea" placeholder="多条域名请换行分隔，每次最多批量处理100条域名"
											class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
											v-model="form3.nameStr"></textarea>
										<div class="textarea-limit">
											{{getStringLen(form3.nameStr)}}/100
										</div>
									</div>
								</div>
								<div class="textarea-tip">
									使用本功能必须把域名DNS修改为190解析DNS，否则将无法正常解析
								</div>
							</div>
						</div>
						<el-form-item label="主机记录">
							<el-input v-model="form3.record" placeholder="请输入主机记录" style="width:240px;"></el-input>
						</el-form-item>
						<el-form-item label="记录类型">
							<el-select v-model="form3.record_type" placeholder="请选择"
								style="width: 240px;margin-right: 20px;">
								<el-option label="A" value="A"></el-option>
								<el-option label="CHAME" value="CHAME"></el-option>
								<el-option label="AAAA" value="AAAA"></el-option>
								<el-option label="NS" value="NS"></el-option>
								<el-option label="TXT" value="TXT"></el-option>
								<el-option label="MX" value="MX"></el-option>
								<el-option label="SRV" value="SRV"></el-option>
							</el-select>
							<span class="text-gray">将域名指向一个IPV4地址</span>
						</el-form-item>
						<el-form-item label="线路类型">
							<el-select v-model="form3.line_type" placeholder="请选择" style="width: 240px">
								<el-option label="默认" :value="0"></el-option>
								<el-option label="电信" :value="1"></el-option>
								<el-option label="联通" :value="2"></el-option>
								<el-option label="移动" :value="3"></el-option>
								<el-option label="教育网" :value="4"></el-option>
								<el-option label="铁通" :value="5"></el-option>
								<el-option label="鹏博士" :value="6"></el-option>
								<el-option label="广电网" :value="7"></el-option>
								<el-option label="长宽" :value="8"></el-option>
								<el-option label="方正宽带" :value="9"></el-option>
								<el-option label="京宽网络" :value="10"></el-option>
								<el-option label="歌华有线" :value="11"></el-option>
								<el-option label="阿里云" :value="12"></el-option>
								<el-option label="东方有线" :value="13"></el-option>
								<el-option label="天威视讯" :value="14"></el-option>
								<el-option label="华数网" :value="15"></el-option>
								<el-option label="通腾讯网络" :value="16"></el-option>
								<el-option label="艾普" :value="17"></el-option>
								<el-option label="中信网络" :value="18"></el-option>
								<el-option label="天威" :value="19"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="记录值">
							<el-input v-model="form3.record_val" placeholder="请输入记录值" style="width:240px;"></el-input>
						</el-form-item>
						<el-form-item label="MX优先级">
							<el-input-number v-model="form3.mx" min="1" max="20" controls-position="right"
								style="width: 240px;margin-right: 20px;" />
							<span class="text-gray">MX优先级范围1-20，仅在记录类型为MX时有效</span>
						</el-form-item>
						<el-form-item label="TLL">
							<el-input-number v-model="form3.tll" min="600" max="604800" controls-position="right"
								style="width: 240px;margin-right: 20px;" />
							<span class="text-gray">TLL范围600-604800</span>
						</el-form-item>
						<el-form-item>
							<div class="form-submit">
								<el-button type="warning">确定添加</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<div v-if="activeTab == 3">
			<div class="bs-panel table-box">
				<div class="bs-panel-body">
					<div class="table-tool">
						<div class="tool-left">
							<span class="selected">
								搜索结果共120条， 已选择{{multipleSelection.length}}条 ，
							</span>
							<el-select v-model="form4.operate" placeholder="选择操作" clearable
								style="width: 100px;margin-right:15px;">
								<el-option label="批量开启" value="start"></el-option>
								<el-option label="批量暂停" value="pause"></el-option>
								<el-option label="批量删除" value="delete"></el-option>
							</el-select>
							<el-button>批量操作</el-button>
						</div>
						<div class="tool-right">
							<el-input v-model="form4.search" style="width: 240px" placeholder="输入关键词查询" clearable
								prefix-icon="Search"></el-input>
						</div>
					</div>
					<el-table ref="multipleTableRef" :data="tableData2" @selection-change="handleSelectionChange"
						style="width: 100%" show-overflow-tooltip>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="record" label="主机记录"></el-table-column>
						<el-table-column prop="record_type" label="记录类型" align="center">
						</el-table-column>
						<el-table-column prop="line_type" label="线路类型" align="center">
						</el-table-column>
						<el-table-column prop="record_val" label="记录值" align="center">
						</el-table-column>
						<el-table-column prop="tll" label="TLL" align="center">
						</el-table-column>
						<el-table-column prop="status" width="130">
							<template #header>
								<el-select v-model="form4.status" placeholder="状态" style="width: 100px">
									<el-option label="处理中" :value="0"></el-option>
									<el-option label="暂停" :value="1"></el-option>
									<el-option label="正常" :value="2"></el-option>
								</el-select>
							</template>
							<template #default="scope">
								<span v-if="scope.row.status == 0" class="td-purple">处理中</span>
								<span v-if="scope.row.status == 1" class="td-error">暂停</span>
								<span v-if="scope.row.status == 2" class="td-success">正常</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" width="200">
							<template #default="scope">
								<div class="operate-btns">
									<el-button link :disabled="scope.row.status == 0">开始</el-button>
									<el-button link
										:disabled="scope.row.status == 0 || scope.row.status == 1">暂停</el-button>
									<el-button link>删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pager-box">
						<span></span>
						<el-pagination v-model:current-page="currentPage" :page-size="50" :background="true"
							:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="520">
			<template #header>
				<div class="dialog-header">
					<span class="dialog-title">选择域名</span>
				</div>
			</template>
			<div class="domains-form">
				<span class="label">快速查找</span>
				<div class="wrapdmTextarea">
					<div class="textarea-warp" style="z-index: 200; top: 0;">
						<div class="textarea-suffix">
							<img src="../../assets/img/search.png" alt="" />
						</div>
						<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
							@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''" style="overflow-y: auto;"
							v-model="domainform.nameStr"></textarea>
					</div>
				</div>
				<el-select v-model="domainform.template" placeholder="选择域名模板" style="width: 200px">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="domains-table">
				<div class="table-tool">
					<div class="tool-left">搜索结果共{{total3}}条，已选择{{multipleSelection3.length}}条。</div>
				</div>
				<el-table ref="multipleTableRef" :data="tableData3" @selection-change="handleSelectionChange3"
					style="width: 100%" show-overflow-tooltip>
					<el-table-column type="selection" width="50"></el-table-column>
					<el-table-column prop="name" label="域名">
					</el-table-column>
					<el-table-column prop="registrar" label="注册商">
					</el-table-column>
				</el-table>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="domainBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="domainSelect">
						选 择
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped lang="scss">
	.form-foot {
		padding-left: 116px;
		border-top: 1px solid #d3d7dc;
		padding-top: 20px;
	}


	.form-agree {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.agree-btn {
			padding: 8px 2px;
		}

		.agree-btn:hover {
			color: #F68A0C;
			text-decoration: underline;
		}
	}

	.textarea-box {
		width: 100%;
		height: 102px;
	}


	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.dmTextarea.dmTyping {
		height: 100px;
	}

	.textarea-tip {
		color: #666;
		margin-top: 10px;
	}

	.form-column {
		flex-direction: column;
		justify-content: flex-start;
	}

	.domain-select .el-button {
		vertical-align: baseline;
		color: rgb(0, 0, 255) !important;
	}

	.domain-select .el-button:hover {
		text-decoration: underline;
	}

	.dns-item {
		margin-bottom: 22px;
	}

	.dns-item:last-child {
		margin-bottom: 0;
	}

	.transfer-form .form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.form-item-label {
		width: 70px;
		line-height: 32px;
	}

	.form-item-content {
		flex: 1;
		min-width: 0;
	}


	.domains-form {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.label {
			width: 70px;
		}

		.wrapdmTextarea {
			width: 200px;
			margin-right: 14px;
		}
	}

	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}

	.form-submit .el-button {
		width: 140px;
	}
</style>